<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./layui.css">
  <style type="text/css">
    body {
      width: 880px;
      margin: 0 auto;
    }
    #app>div {
      padding: 0 10px;
      border: 1px solid #ddd;
    }

    @page {
      size: A4;
      margin: 0;
    }

    @media print {

      html,
      body {
        width: 210mm;
        height: 297mm;
      }
    }

    tr>td:nth-child(1) {
      width: 60px;
    }

    td {
      text-align: center;
    }

    .register-name {
      text-align: center;
      line-height: 39px;
      height: 30px;
      font-size: 20px;
    }

    .tdone {
      width: 60px;
      height: auto;
    }

    .layui-row,
    .layui-row-height {
      height: auto;
      line-height: 38px;
    }
    .layui-table td, .layui-table th {
      padding: 5px 15px;
    }

    .inputdist {
      margin-left: 20px;
    }

    [v-cloak] {
      display: none !important;
    }
  </style>
</head>

<body>
  <div id="app" ref="app">
    <div>
      <!--startprint-->
      <div class="register-name">应聘/入职登记表</div>
      <div class="layui-row">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-row-height">填表日期：{{dataOfFilling}}</div>
        <div class="layui-col-xs5 layui-col-sm5 layui-col-md5 layui-row-height">拟应聘岗位：{{post}}</div>
        <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 layui-row-height"><button type="button" class="layui-btn layui-btn-sm btn-print">打印</button></div>
      </div>
      <table class="layui-table" cellspacing="0" cellpadding="0">
        <tbody>
          <tr>
            <td class="thone">姓名</td>
            <td class="thone" v-cloak>{{name}}</td>
            <td class="thone">性别</td>
            <td class="thone" v-cloak>{{gender}}</td>
            <td class="thone">农历真实生日</td>
            <td class="thone" colspan="3">
              <div v-cloak>
                {{birthday}}
              </div>
            </td>
            <td class="thone" rowspan="5"></td>
          </tr>
          <tr>
            <td class="thone">籍贯</td>
            <td class="thone" v-cloak>{{nativePlace}}</td>
            <td class="thone">民族</td>
            <td class="thone" v-cloak>{{nation}}</td>
            <td class="thone">婚姻情况</td>
            <td class="thone" v-cloak>{{marryStatus === 1 ? '已婚' : '未婚'}}</td>
            <td class="thone">生育情况</td>
            <td class="thone" v-cloak>{{abilityStatus === 1 ? '已育' : '未育'}}</td>
          </tr>
          <tr>
            <td class="thone">政治面貌</td>
            <td class="thone" v-cloak>{{political}}</td>
            <td class="thone">体重（KG）</td>
            <td class="thone" v-cloak>{{weight}}</td>
            <td class="thone">身高（CM）</td>
            <td class="thone" colspan="3" v-cloak>{{height}}</td>
          </tr>
          <tr>
            <td class="thone">最高学历</td>
            <td class="thone" v-cloak>{{heightestEducation}}</td>
            <td class="thone">专业</td>
            <td class="thone" v-cloak>{{major}}</td>
            <td class="thone">毕业院校</td>
            <td class="thone" colspan="3" v-cloak>{{graduateUniversity}}</td>
          </tr>
          <tr>
            <td class="thone">资格/职称证书</td>
            <td class="thone" colspan="3" v-cloak>{{zhengshu}}</td>
            <td class="thone">发证单位</td>
            <td class="thone" colspan="3" v-cloak>{{fazhengdanwei}}</td>
          </tr>
          <tr>
            <td class="thone">身份证号码</td>
            <td class="thone" colspan="3" v-cloak>{{identity}}</td>
            <td class="thone">户口所在地</td>
            <td class="thone" colspan="4">
              <div v-cloak>
                {{hkszd}}
              </div>
            </td>
          </tr>
          <tr>
            <td class="thone">本人手机号码</td>
            <td class="thone" v-cloak>{{mobile}}</td>
            <td class="thone">微信号</td>
            <td class="thone" v-cloak>{{wechat}}</td>
            <td class="thone">个人E-mail</td>
            <td class="thone" colspan="4" v-cloak>{{email}}</td>
          </tr>
          <tr>
            <td class="thone">紧急联系人（直系亲属）</td>
            <td class="thone" v-cloak>{{urgentContact[0].urgent_name}}</td>
            <td class="thone">手机</td>
            <td class="thone" v-cloak>{{urgentContact[0].urgent_mobile}}</td>
            <td class="thone">紧急联系人（朋友）</td>
            <td class="thone" v-cloak>{{urgentContact[1] ? urgentContact[1].urgent_name : ''}}</td>
            <td class="thone">手机号码</td>
            <td class="thone" colspan="2" v-cloak>{{urgentContact[1] ? urgentContact[1].urgent_mobile : ''}}</td>
          </tr>
          <tr>
            <td class="thone">现详细居住地址</td>
            <td class="thone" colspan="8" v-cloak>{{currentAddress}}</td>
          </tr>
          <tr>
            <td colspan="9" style="text-align:center">教育经历（从高到底）</td>
          </tr>
          <tr>
            <td colspan="2">起止年月</td>
            <td colspan="2">毕业院校全称</td>
            <td>专业</td>
            <td>学历及学位</td>
            <td></td>
            <td colspan="2">证明人及电话</td>
          </tr>
          <tr>
            <td colspan="2">~</td>
            <td colspan="2"></td>
            <td></td>
            <td></td>
            <td></td>
            <td colspan="2"></td>
          </tr>
          <tr>
            <td colspan="2">~</td>
            <td colspan="2"></td>
            <td></td>
            <td></td>
            <td></td>
            <td colspan="2"></td>
          </tr>
          <tr>
            <td colspan="2">~</td>
            <td colspan="2"></td>
            <td></td>
            <td></td>
            <td></td>
            <td colspan="2"></td>
          </tr>
          <tr>
            <td colspan="9" style="text-align:center">工作经历（从近至远）</td>
          </tr>
          <tr>
            <td colspan="2">起止年月</td>
            <td colspan="2">工作单位全称</td>
            <td>部门与职位</td>
            <td>离职原因</td>
            <td></td>
            <td colspan="2">证明人及电话</td>
          </tr>
          <tr>
            <td colspan="2">~</td>
            <td colspan="2"></td>
            <td></td>
            <td></td>
            <td></td>
            <td colspan="2"></td>
          </tr>
          <tr>
            <td colspan="2">~</td>
            <td colspan="2"></td>
            <td></td>
            <td></td>
            <td></td>
            <td colspan="2"></td>
          </tr>
          <tr>
            <td colspan="2">~</td>
            <td colspan="2"></td>
            <td></td>
            <td></td>
            <td></td>
            <td colspan="2"></td>
          </tr>
          <tr>
            <td colspan="9" style="text-align:center">主要家庭成员</td>
          </tr>
          <tr>
            <td class="thone">姓名</td>
            <td colspan="2">工作单位</td>
            <td>与本人关系</td>
            <td colspan="3">联系电话</td>
            <td></td>
            <td colspan="2">现所在地区（城市）</td>
          </tr>
          <tr>
            <td class="thone"></td>
            <td class="thone" colspan="2"></td>
            <td class="thone"></td>
            <td class="thone" colspan="3"></td>
            <td class="thone"></td>
            <td class="thone" colspan="2"></td>
          </tr>
          <tr>
            <td class="thone"></td>
            <td class="thone" colspan="2"></td>
            <td class="thone"></td>
            <td class="thone" colspan="3"></td>
            <td class="thone"></td>
            <td class="thone" colspan="2"></td>
          </tr>
          <tr>
            <td class="thone"></td>
            <td class="thone" colspan="2"></td>
            <td class="thone"></td>
            <td class="thone" colspan="3"></td>
            <td class="thone"></td>
            <td class="thone" colspan="2"></td>
          </tr>
          <tr>
            <td colspan="9" style="text-align:center">担任重要职务的社会关系（家人与亲友）</td>
          </tr>
          <tr>
            <td class="thone">姓名</td>
            <td colspan="2">工作单位</td>
            <td>与本人关系</td>
            <td colspan="3">联系电话</td>
            <td></td>
            <td colspan="2">现所在地区（城市）</td>
          </tr>
          <tr>
            <td class="thone"></td>
            <td class="thone" colspan="2"></td>
            <td class="thone"></td>
            <td class="thone" colspan="3"></td>
            <td class="thone"></td>
            <td class="thone" colspan="2"></td>
          </tr>
          <tr>
            <td class="thone"></td>
            <td class="thone" colspan="2"></td>
            <td class="thone"></td>
            <td class="thone" colspan="3"></td>
            <td class="thone"></td>
            <td class="thone" colspan="2"></td>
          </tr>
          <tr>
            <td class="thone"></td>
            <td class="thone" colspan="2"></td>
            <td class="thone"></td>
            <td class="thone" colspan="3"></td>
            <td class="thone"></td>
            <td class="thone" colspan="2"></td>
          </tr>
          <tr>
            <td class="thone" colspan="9" style="text-align:left;">
              <span>当前何种工作状态？</span>
              <input type="checkbox" name="" id="" class="inputdist"><span>在职</span>
              <input type="checkbox" name="" id="" class="inputdist"><span>请长假</span>
              <input type="checkbox" name="" id="" class="inputdist"><span>停薪留职</span>
              <input type="checkbox" name="" id="" class="inputdist"><span>辞职</span>
              <input type="checkbox" name="" id="" class="inputdist"><span>辞退</span>
              <input type="checkbox" name="" id="" class="inputdist"><span>其它:</span>
            </td>
          </tr>
          <tr>
            <td class="thone" colspan="9" style="text-align:left;">
              <span>招聘信息来源？</span>
              <input type="checkbox" name="" id="" class="inputdist"><span>前程无忧</span>
              <input type="checkbox" name="" id="" class="inputdist"><span>智联</span>
              <input type="checkbox" name="" id="" class="inputdist"><span>58同城</span>
              <input type="checkbox" name="" id="" class="inputdist"><span>熟人介绍（介绍人： ）</span>
              <input type="checkbox" name="" id="" class="inputdist"><span>辞退</span>
              <input type="checkbox" name="" id="" class="inputdist"><span>其它:</span>
            </td>
          </tr>
          <tr>
            <td class="thone" colspan="9" style="text-align:left;">
              <span>公司内有无亲属</span>
              <input type="checkbox" name="" id="" class="inputdist"><span>无</span>
              <input type="checkbox" name="" id="" class="inputdist"><span>有</span>
              <span style="margin-right:50px;">(姓名：</span>
              <span style="margin-right:50px;">与本人关系：</span>
              <span>）</span>
            </td>
          </tr>
          <tr>
            <td class="thone" colspan="9" style="text-align:left;">
              <span>上.下游及同业竞争企业内有无亲属？</span>
              <input type="checkbox" name="" id="" class="inputdist"><span>无</span>
              <input type="checkbox" name="" id="" class="inputdist"><span>有</span>
              <span style="margin-right:50px;">(姓名：</span>
              <span style="margin-right:50px;">与本人关系：</span>
              <span>）</span>
            </td>
          </tr>
          <tr>
            <td class="thone" colspan="9" style="text-align:left;">
              <span>是否曾购买本公司产品或接受护肤服务？</span>
              <input type="checkbox" name="" id="" class="inputdist"><span>无</span>
              <input type="checkbox" name="" id="" class="inputdist"><span>有</span>
              <span style="margin-right:50px;">(所认识护肤老师名字：</span>
              <span style="margin-right:50px;">）</span>
            </td>
          </tr>
          <tr>
            <td class="thone" colspan="9" style="text-align:left;">
              <span>是否曾患遗传或重大疾病有不适合安排的工作？</span>
              <input type="checkbox" name="" id="" class="inputdist"><span>无</span>
              <input type="checkbox" name="" id="" class="inputdist"><span>有</span>
              <span style="margin-right:50px;">(不适宜安排的工作有：</span>
              <span style="margin-right:50px;">）</span>
            </td>
          </tr>
          <tr>
            <td class="thone" colspan="4" style="text-align:left;">
              <span style="margin-right:50px;">*目前税前收入：月薪（(</span>
              <span style="margin-right:50px;">）</span>
              <span style="margin-right:50px;">,年薪（</span>
              <span style="margin-right:50px;">）</span>
            </td>
            <td class="thone" colspan="7" style="text-align:left;">
              <span style="margin-right:50px;">*期望税前收入：月薪（</span>
              <span style="margin-right:50px;">）</span>
              <span style="margin-right:50px;">,年薪（</span>
              <span style="margin-right:50px;">）</span>
            </td>
          </tr>
          <tr>
            <td class="thone" colspan="4" style="text-align:left;">
              应聘该岗位的优势条件：
            </td>
            <td class="thone" colspan="7" style="text-align:left;">
              个人兴趣爱好及特长：
            </td>
          </tr>
          <tr>
            <td style="text-align:left;" colspan="7">
              本人承诺：以上资料属实并愿意接受相应的调查与核实，如有虚假愿无条件接受公司处理或辞退。
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <!--endprint-->
  <script src="mock-min.js"></script>
  <script src="vue-2.5.17.js"></script>
  <script>
    window.onload = function () {
      // 使用 Mock
      var Random = Mock.Random
      var data = Mock.mock({
        "code": 200,
        "data": {
          "id|+1": 0,
          "data_of_filling": "@date",
          "post|1": [
            "PHP工程师",
            "web前端工程师",
            "销售"
          ],
          "base_info": {
            "name": "@cname",
            "gender|1": "@integer(0, 1)",
            "birthday": "@date",
            "native_place": "@city(true)",
            "nation": function () {
              return Random.cname() + "族"
            },
            "marry_status|1": "@integer(0, 1)",
            "ability_status|1": "@integer(0, 1)",
            "political": "@cword(2)",
            "weight": "@integer(30, 100)",
            "height": "@integer(140, 200)",
            "heightest_education": "@cword(2,5)",
            "major": "@cword(3,6)",
            "graduate_university": "@cword(4,9)",
            "zhengshu": "@cword(4,10)",
            "fazhengdanwei": "@cword(4,10)",
            "identity": /(^\d{15}$)|(^\d{17}([0-9]|X)$)/,
            "hkszd": "@city(true)",
            "mobile": /^(13|17|18)\d{9}$/,
            "wechat": "@string(3,10)",
            "email": /[a-zA-Z0-9]{4,10}@[a-zA-Z0-9]{2,5}\.(com|cn)$/,
            "urgent_contact|1-2": [
              {
                "urgent_name": "@cname",
                "urgent_mobile": /^(13|17|18)\d{9}$/
              }
            ],
            "current_address": function () {
              return Random.county(true) + Random.integer(1, 99) + '街' + Random.integer(1, 99) + '号'
            },
          },
          "experience_education|1-3": [
            {
              "start_date": "@date('yyyy-MM-dd')",
              "academy": "@cword(4,10)",
              "major": "@cword(4,10)",
              "degree": "@cword(4,6)",
              "certifier": "@cname(2,5)",
              "certifier_mobile": /^(13|17|18)\d{9}$/
            }
          ],
          "experience_work|0-3": [
            {
              "start_end_date": "@date('yyyy-MM-dd')",
              "unit": "@cword(4,10)",
              "department": "@cword(4,10)",
              "job": "@cword(4,6)",
              "leaving_reasons": "@cname(2,5)",
              "certifier": "@cname(2,5)",
              "certifier_mobile": /^(13|17|18)\d{9}$/
            }
          ],
          "family_menber|0-3": [
            {
              "name": "@cname",
              "unit": "@cword(4,10)",
              "relation": "@cword(4,10)",
              "phone": /^(13|17|18)\d{9}$/,
              "current_city": "@city"
            }
          ],
          "social_relation|0-3": [
            {
              "name": "@cname",
              "unit": "@cword(4,10)",
              "relation": "@cword(4,10)",
              "phone": /^(13|17|18)\d{9}$/,
              "current_city": "@city"
            }
          ],
          "other": {
            "current_status": "@integer(0,6)",
            "channel_from": "@integer(0,6)",
            "is_has_relatives": "@integer(0,1)",
            "other_is_has_relatives": "@integer(0,1)",
            "is_buy_product": "@integer(0,1)",
            "is_has_disease": "@integer(0,1)",
            "current_income": "@integer(3000,10000)",
            "advantage": "@csentence(10,50)"
          }
        }
      })
      // 输出结果
      console.log(JSON.stringify(data, null, 4))

      baseInfo = data.data.base_info
      var tmpData = data.data
      var vm = new Vue({
        el: '#app',
        data: {
          dataOfFilling: tmpData.data_of_filling,
          post: tmpData.post,
          name: baseInfo.name,
          gender: baseInfo.gender,
          birthday: baseInfo.birthday,
          nativePlace: baseInfo.native_place,
          nation: baseInfo.nation,
          marryStatus: baseInfo.marry_status,
          abilityStatus: baseInfo.ability_status,
          political: baseInfo.political,
          weight: baseInfo.weight,
          height: baseInfo.height,
          heightestEducation: baseInfo.heightest_education,
          major: baseInfo.major,
          graduateUniversity: baseInfo.graduate_university,
          zhengshu: baseInfo.zhengshu,
          fazhengdanwei: baseInfo.fazhengdanwei,
          identity: baseInfo.identity,
          hkszd: baseInfo.hkszd,
          mobile: baseInfo.mobile,
          wechat: baseInfo.wechat,
          email: baseInfo.email,
          urgentContact: baseInfo.urgent_contact,
          currentAddress: baseInfo.current_address,
        },
        methods: {
          printPreview: function () {
            var _this = this
            var oBtnPrint = document.querySelector('.btn-print');
            document.querySelector('html').addEventListener('click', function (event) {
              console.log(event.target.className.split(' '))
              if (event.target.className.split(' ').indexOf('btn-print') !== -1) {
                _this.print();
              }
            })
          },
          print: function () {
            var originHtml = this.$refs.app.innerHTML
            //需要打印的内容
            window.document.body.innerHTML = originHtml
            window.print()
            // window.document.body.innerHTML = originHtml
            // window.location.reload()
          }
        },
        created() {
          this.printPreview()
        }
      })
    }
  </script>
</body>

</html>